<template>
  <!-- 默认勾选
        1：定义接口
        2：导入与定义方法
        3：点击打开弹框时调用获取数据
        4：实现渲染默认勾选

      分配权限数据接口调用
        1：定义api
        2:导入
        3：点击确定调用api传递相应数据
 -->

  <el-dialog
    title="分配权限"
    width="700px"
    :visible="value"
    @close="closeEvent"
  >
    <!-- 默认选中
       el-tree
          适用于不确定el-tree是否渲染
           node-key="唯一标识的字段名，一般都是id"
           default-checked-keys=[需要选中项的id]
           default-checked-keys:累加选中
        设置选中项：要确定el-tree已渲染完成
           node-key="唯一标识的字段名，一般都是id"
           ref="tree"
          设置勾选项   this.$refs.tree.setCheckedKeys([需要选中项的id])
          获取勾选项   this.$refs.tree.getCheckedKeys()
   -->
    <el-tree
      v-if="showTree"
      ref="tree"
      check-strictly
      node-key="id"
      :default-checked-keys="defaultChecked"
      show-checkbox
      default-expand-all
      :data="list"
      :props="{ label: 'name', children: 'children' }"
    />

    <template #footer>
      <div style="text-align: center">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeEvent">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { sysPermission } from '@/api/permission'
import { changeData } from '@/utils'
import { sysRoleId, sysRoleAssignPrem } from '@/api/setting'
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      showTree: true,
      isShow: false,
      list: [],
      defaultChecked: [],
      id: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    closeEvent() {
      this.showTree = false
      this.$nextTick(() => {
        this.showTree = true
        this.defaultChecked = []
        this.$emit('input', false)
      })
      //   this.$refs.tree.setCheckedKeys([])
    },
    async getData() {
      const res = await sysPermission()
      this.list = changeData(res.data, '0')
      // console.log('权限数据', res)
    },
    // 获取角色详情数据
    async getRoleInfo(id) {
      this.id = id
      const res = await sysRoleId(id)
      this.defaultChecked = res.data.permIds
      //   this.$refs.tree.setCheckedKeys(res.data.permIds)
      // console.log('角色详情', res)
    },
    // 确定点击
    async submit() {
      await sysRoleAssignPrem({
        id: this.id,
        permIds: this.$refs.tree.getCheckedKeys()
      })
      this.$message.success('分配权限成功')
      this.closeEvent()
    }
  }
}
</script>
<style></style>
